<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/login.css" />

    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/login.js"></script>
    <script src="../jquery/jquery.min.js"></script>
    <script src="../validation/dist/jquery.validate.min.js"></script>
    <script src="../validation/dist/localization/messages_zh.min.js"></script>
</head>

<body>
    <div class="container">
        <form class="form-horizontal login" id="form">
            <h3>登录框</h3>
            <div class="form-group">
                <label for="loginUser" class="col-sm-2 control-label">
                    用户名
                </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="loginUser" name="username" placeholder="Email" />
                </div>
            </div>
            <div class="form-group">
                <label for="loginPass" class="col-sm-2 control-label">
                    密码
                </label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="loginPass" name="password" placeholder="Password" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">
                        登录
                    </button>
                </div>
            </div>
        </form>

        <form class="form-horizontal regist" id="registform">
            <h3>注册框</h3>
            <div class="form-group">
                <label for="registUser" class="col-sm-2 control-label">
                    用户名
                </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="registUser" name="username" placeholder="Email" />
                </div>
            </div>
            <div class="form-group">
                <label for="registPass" class="col-sm-2 control-label">
                    密码
                </label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="registPass" name="password"
                        placeholder="Password" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">
                        注册
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script>
        //登录
        jQuery.validator.addMethod(
            "userTest",
            function (value) {
                // 用户名正则验证：
                // 由 数字 字母组成
                // value 就是需要验证这个输入框的内容
                let reg = /^[0-9a-z]{5,10}$/i; //正则
                if (reg.test(value)) { //判断正则
                    return true;
                }
                return false;
            },
            "请输入正确的用户名，要求是由数字或字母组成5到10位数"
        );
        jQuery.validator.addMethod(
            "passwordTest",
            function (value) {
                let reg = /^[0-9a-z]{5,10}$/i; //正则
                if (reg.test(value)) { //判断正则
                    return true;
                }
                return false;
            },
            "请输入正确的密码，要求是由数字或字母组成5到10位数"
        );

        $("#form").validate({ //ok
            rules: {
                username: {
                    required: true,
                    userTest: true
                },
                password: {
                    required: true,
                    passwordTest: true,
                },
            },
            messages: {
                username: {
                    required: "用户名是必填项",
                },
                password: {
                    required: "密码是必填",
                },
            },
        })


        //注册
        jQuery.validator.addMethod(
            "userTest",
            function (value) {
                // 用户名正则验证：
                // 由 数字 字母组成
                // value 就是需要验证这个输入框的内容
                let reg = /^[0-9a-z]{5,10}$/i; //正则
                if (reg.test(value)) { //判断正则
                    return true;
                }
                return false;
            },
            "用户名要求5到10位，且只能由数字和字母组成"
        );
        jQuery.validator.addMethod(
            "passwordTest",
            function (value) {
                let reg = /^[0-9a-z]{5,10}$/i; //正则
                if (reg.test(value)) { //判断正则
                    return true;
                }
                return false;
            },
            "密码格式错误，要求是由数字或字母组成5到10位数"
        );

        $("#registform").validate({ //ok
            rules: {
                username: {
                    required: true,
                    userTest: true
                },
                password: {
                    required: true,
                    passwordTest: true,
                },
            },
            messages: {
                username: {
                    required: "用户名是必填项",
                },
                password: {
                    required: "密码是必填",
                },
            },
        })
        //登录注册的正则验证
    </script>
</body>

</html>